<template>
	<view class="mask mask-show">
		<view class="cu-dialog" :style="'margin:'+screenWidth/8+'px;'+'width:'+screenWidth+'px'">
			<view class="icon-item position-absolute right-2">
				<uni-icons type="close" size="25" @click="closeModalDialog" />
			</view>
			<view class="flex flex-column flex-1 align-center">
				<view class="flex align-center mt-2">
					<text class="font-32 text-black font-weight-600">是否接受此次匹配服务？</text>
				</view>
				<image src="../../static/default.jpg" class="smaller-circle"></image>
				<view class="flex align-center mt-2">
					<text class="font text-black font-weight-bold">{{modalData.user_nicename}}</text>
				</view>
				
				<text class="font-sm text-danger mt-1">{{modalData.area_address}}·{{modalData.area_address1}}</text>
				<view class="flex align-center w-80 mx-4 mt-2">
					<view class="flex-1 flex flex-column align-center justify-center" v-for="(item,index) in iconlist" :key="index">
						<image class="slot-image" :src="item.imgpath" style="width: 72rpx;height: 72rpx;"></image>
						<text class="font-28 font-weight-600 mt-2">{{item.name}}</text>
						<text class="font-sm text-gray-normal">{{item.message}}</text>
					</view>
				</view>
				<view class="flex align-center w-80 mx-4">
					<view class="flex-1 flex flex-column align-center justify-center mt-0480">
						<image class="slot-image" src="@/static/icons/iconyuyinzixun.png" style="width: 72rpx;height: 72rpx;"></image>
					</view>
					<view class="flex-1 flex"></view><view class="flex-1 flex"></view>
				</view>
				<view class="flex flex-wrap">
				<button type="primary" class="callpair-button" @click="receiverCalling()">接受 (20s)</button>
				<button type="primary" class="callcanel-button" @click="closeModalDialog">拒&nbsp;绝</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				screenWidth: 320,
				warpperWidth:40,
				modalName: 'normal',
				radio: 'radio1',
				tabIndex: 0,
				iconlist: [{
					name: "视频通话",
					message: "咨询方式",
					imgpath:require("@/static/icons/iconshipinzixun.png")
				}, {
					name: "5元/分钟",
					message: "咨询价格",
					imgpath:require("@/static/icons/iconzixunjiage.png")
				}, {
					name: "经济纠纷",
					message: "咨询领域",
					imgpath:require("@/static/icons/iconzixunlingyu.png")
				}],
				modalData:{},
				roomId:10000,
				trtcuuid:'trtcuuid'
			};
		},
		onLoad(e) {
			this.modalData = JSON.parse(e.modalData);
			this.roomId=this.modalData['roomid'];
			uni.getSystemInfo({
				success: res => {
					this.screenWidth = res.windowWidth*0.8;
					this.warpperWidth = res.windowWidth*0.1;
				},
			});
			// 初始化towerSwiper 传已有的数组名即可
			uni.getStorage({
				key:"user-info",
				success:(res)=>{
					if (res.data) {
						let result = JSON.parse(res.data);
						this.trtcuuid = result['trtcuuid'];
					}
				}
			});
		},
		methods: {
			closeModalDialog() {
				uni.navigateBack({
					
				})
			},
			receiverCalling() {
				console.log(this.roomId+',trtcuuid:'+this.trtcuuid);
				uni.navigateTo({
					url:"../chat-receiver/chat-receiver?roomId="+this.roomId+'&trtcuuid='+this.trtcuuid
				})
			},
		}
	}
</script>

<style>
	.mask {
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		height: 100vh;
		width: 100vw;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}

	.mask.mask-show {
		background: rgba(0, 0, 0, 0.6);
	}

	.smaller-circle {
		margin: 32upx 32upx 0;
		border-radius: 80upx;
		width: 160upx;
		height: 160upx;
	}

	.callpair-button {
		padding: 16rpx 36rpx;
		margin: 36rpx;
		background-color: #A868FF !important;
		font-size: 32rpx;
		line-height: 1.8;
		border-radius: 48rpx;
	}
	
	.callcanel-button {
		padding: 16rpx 72rpx;
		margin: 36rpx;
		background-color: #E5E5E5;
		color: #A6A6A6;
		font-size: 32rpx;
		line-height: 1.8;
		border-radius: 48rpx;
	}
</style>
